<template>
  <view class="selectResort white-bg">
    <view class="container-box auto-box">
      <scroll-view
        scroll-y="true"
        style="height: 100%">
        <view v-if="dataList.length">
          <view
            :class="['white-bg item-box flex-box border-bottom-box', index < dataList.length ? 'space-vertical-box' : '']"
            v-for="(item, index) in dataList"
            @tap.stop="handleSelect(item)"
            :key="index">
            <view :class="['select-box', item.isSelect ? 'select-active' : '']">
              <uv-icon v-if="item.isSelect" name="checkbox-mark" color="#fff" size="14"></uv-icon
            ></view>
            <view class="auto-box">
              <view>
                <text class="name">{{ item.locationName }}</text>
              </view>
              <view class="space-top">
                <text class="name">{{ item.locationDetail }}</text>
              </view>
              <view>
                <text>{{ item.meetTimeDesc }}</text>
              </view>
            </view>
            <view class="edit-icon">
              <image
                :src="mapIcon"
                mode="aspectFit" />
            </view>
          </view>
        </view>
        <view
          v-else
          class="flex-box center-box fill-height">
          <uv-empty mode="data"></uv-empty>
        </view>
      </scroll-view>
    </view>
    <view
      class="flex-box operate-box"
      v-if="dataList.length && isRequest">
      <view
        class="confirm-box auto-box"
        @tap.stop="handleConfirm">
        确认
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import mapIcon from "@/asstes/images/myCamper/mapIcon.png";
import { useOrderStore } from "@/stores/order";
import { onLoad } from "@dcloudio/uni-app";
import HomeAPI from "@/api/home/api.ts";
import MyCamperApi from "@/api/camper/api.ts";
const orderStore = useOrderStore();
const orderFormData = ref({
  type: 2, //现金支付 2 兑换券
  routeId: null, //路线id
  campId: null, //营队id
  camperIds: [], //营员id
  campMeetLocationId: null, //集合地id
  payAmount: 0, //支付金额,
  snCode: ""
});
// 基础数据
const dataList = ref([]);
const isRequest = ref(false);
/**
 * @description 选择
 * @param {Object} item
 */
function handleSelect(item) {
  dataList.value.forEach((item) => {
    item.isSelect = false;
  });
  item.isSelect = !item.isSelect;
}

/**
 * @description 确认
 */
function handleConfirm() {
  const selected = dataList.value.find((item) => item.isSelect);
  if (!selected) {
    uni.showToast({
      title: "请选择集合地",
      icon: "none",
      duration: 2000
    });
  } else {
    orderStore.campMeetLocation = selected;
    if (orderStore.orderType === 2) {
      createOrder();
    } else {
      uni.navigateBack();
    }
  }
}

/**
 * @description 获取数据
 */
function getDataList(campId) {
  // 获取集合点数据列表
  MyCamperApi.getMeetLocationList(campId)
    .then((res) => {
      isRequest.value = true;
      dataList.value = res.data;
    })
    .catch((err) => {
      isRequest.value = true;
    });

  dataList.value.forEach((item) => {
    item.isSelect = orderStore.campMeetLocation.id == item.id;
  });
}
function createOrder() {
  orderFormData.value.campId = orderStore.campId;
  orderFormData.value.routeId = orderStore.campId;
  orderFormData.value.camperIds = orderStore.selectCamperList.map((item) => item.id);
  orderFormData.value.campMeetLocationId = orderStore.campMeetLocation?.id || null;
  orderFormData.value.snCode = orderStore.snCode;
  HomeAPI.createOrder(orderFormData.value).then(({ data }) => {
    console.log(data);
    uni.showToast({
      title: "订单保存成功",
      duration: 2000,
      icon: "none"
    });
    // 成功之后清除缓存数据
    orderStore.clearData();
    //跳转到订单详情页面
    uni.redirectTo({
      url: "/pages/order/detail?orderId=" + data
    });
  });
}
onLoad(() => {
  getDataList(orderStore.campId);
});
</script>

<style lang="scss" scoped>
.selectResort {
  height: 100%;
  display: flex;
  flex-direction: column;
  .head-box {
    background: rgba(67, 207, 124, 0.21);
    padding: 10rpx 34rpx;
    font-size: 14rpx;
    color: rgba(67, 207, 124, 1);
  }
  .container-box {
    margin: 40rpx 0;
    overflow: hidden;
  }
  .operate-box {
    justify-content: space-around;
    background: #fff;
  }

  .delete-box {
    border-radius: 10rpx;
    background: rgba(128, 128, 128, 1);
    font-size: 32rpx;
    color: #fff;
    padding: 22rpx 42rpx;
  }
  .add-box {
    border-radius: 10rpx;
    background: rgba(67, 207, 124, 1);
    font-size: 32rpx;
    color: #fff;
    padding: 22rpx 42rpx;
  }
  .item-box {
    padding: 20rpx 40rpx;
    font-size: 24rpx;
    color: rgba(128, 128, 128, 1);
  }
  .name {
    color: #000;
    font-size: 28rpx;
    margin-right: 20rpx;
  }
  .space-box {
    margin: 0 10rpx;
  }
  .select-box {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border: 1rpx solid #000;
    margin-right: 20rpx;
    color: #fff;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 32rpx;
  }
  
  .select-active {
    background: rgba(67, 207, 124, 1);
    border-color: rgba(67, 207, 124, 1);
  }
  .space-top {
    margin: 10rpx 0;
  }
  .edit-icon {
    width: 40rpx;
    height: 40rpx;
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .space-vertical-box {
    margin-bottom: 40rpx;
  }
  .confirm-box {
    border-radius: 10rpx;
    background: rgba(67, 207, 124, 1);
    margin: 32rpx 94rpx;
    text-align: center;
    padding: 22rpx 0;
    color: #fff;
  }
  .center-box {
    justify-content: center;
  }

  .nodata {
    width: 346rpx;
    height: 336rpx;

    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .fill-height {
    height: 100%;
  }
}
</style>
